<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${article.title}</title>
  <meta name="keywords" content="${article.seoKeywords!}">
  <meta name="description" content="${article.seoDescription!}">
  [#include 'includes_meta.html'/]
  [#include 'includes_css.html'/]
  [#include 'includes_js.html'/]
</head>
<body>
[#include 'includes_header.html'/]
<div class="bg-gray-200">
  <div class="container">
    <nav class="row" aria-label="breadcrumb">
      <ol class="col list-inline my-2">
        <li class="list-inline-item"><a href="${site.url}">首页</a></li>
        [#list channel.paths as c]
          <li class="list-inline-item">/</li>
          <li class="list-inline-item">[@A bean=c/]</li>
        [/#list]
      </ol>
    </nav>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4 mt-4">
      <img class="img-fluid img-thumbnail" src="${article.image}" alt="">
    </div>
    <div class="col-md-8 mt-4">
      <h5 class="cm-ff-yh">${article.title}</h5>
      <div class="mt-3 pb-3 border-bottom text-muted">
        <span>${format(article.publishDate, 'yyyy-MM-dd HH:mm')}</span>
        <i class="ml-2 far fa-eye"></i> <span id="views"></span>
        <script>
          axios.get('${api}/article/view/${article.id}').then(function (response) {
            $('#views').text(response.data);
          });
        </script>
      </div>
      <div class="clearfix">
        <div class="float-left w-50 mt-3"><span class="text-muted mr-2">软件语言：</span>${article.customs['language']!}</div>
        <div class="float-left w-50 mt-3"><span class="text-muted mr-2">软件类型：</span>${article.customs['type']!}</div>
        <div class="float-left w-50 mt-3"><span class="text-muted mr-2">授权方式：</span>${article.customs['license']!}</div>
        <div class="float-left w-50 mt-3"><span class="text-muted mr-2">软件大小：</span>${article.fileSize}</div>
        <div class="float-left w-50 mt-3"><span class="text-muted mr-2">推荐星级：</span><span class="text-danger">${article.customs['star']!}</span></div>
        <div class="float-left w-50 mt-3"><span class="text-muted mr-2">更新时间：</span>${format(article.publishDate, 'yyyy-MM-dd')}</div>
        <div class="float-left w-50 mt-3"><span class="text-muted mr-2">下载次数：</span><span id="downloads" class="text-danger"></span> 次</div>
        <div class="float-left w-50 mt-3"><span class="text-muted mr-2">运行环境：</span>${article.customs['system']!?join(", ")}</div>
      </div>
      <a id="articleDownload" class="mt-3 p-2 rounded h3 d-inline-block bg-primary text-white text-decoration-none">
        <i class="fas fa-download"></i> 立即下载
      </a>
      <script>
        axios.get('${api}/article/download-params/${article.id}').then(function (response) {
          $('#articleDownload').attr('href', '${dy}/download/${article.id}?' + response.data);
        })
      </script>
      <div class="lead d-flex text-danger">
        <div class="cm-pointer" onclick="voteUp()"><i class="far fa-thumbs-up"></i> <span id="ups"></span></div>
        <div class="cm-pointer ml-4" onclick="voteDown()"><i class="far fa-thumbs-down"></i> <span id="downs"></span></div>
      </div>
      <script>
        function voteUp() {
          axios.post('${api}/article/up/${article.id}').then(function (response) {
            if (response.data <= 0) {
              alert("你已经顶过一次！");
              return;
            }
            $('#ups').text(response.data);
          });
        }

        function voteDown() {
          axios.post('${api}/article/down/${article.id}').then(function (response) {
            if (response.data <= 0) {
              alert("你已经踩过一次！");
              return;
            }
            $('#downs').text(response.data);
          });
        }

        axios.get('${api}/article/buffer/${article.id}').then(function (response) {
          $('#ups').text(response.data.ups);
          $('#downs').text(response.data.downs);
          $('#downloads').text(response.data.downloads);
        });
      </script>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <h5 class="mt-2 border-bottom"><span class="cm-block-head-bottom">软件介绍</span></h5>
      <div class="article-content">${article.text!?no_esc}</div>
      <script>$('.article-content img').addClass('img-fluid');</script>
      <ul class="border-top list-unstyled mt-3 pt-3">
        [@ArticleNext id=article.id publishDate=article.publishDate channelId=article.channelId; bean]
          <li class="text-truncate mt-2">
            <strong>上一条：</strong>[#if bean??][@A bean=bean class="cm-link"/][#else]没有了[/#if]
          </li>
        [/@ArticleNext]
        [@ArticlePrev id=article.id publishDate=article.publishDate channelId=article.channelId; bean]
          <li class="text-truncate mt-2">
            <strong>下一条：</strong>[#if bean??][@A bean=bean class="cm-link"/][#else]没有了[/#if]
          </li>
        [/@ArticlePrev]
      </ul>
      <h5 class="mt-4 border-bottom"><span class="cm-block-head-bottom">相关新闻</span></h5>
      [@EsArticleList q=article.title excludeId=article.id limit=5; list]
        <ul class="list-unstyled mt-3">
          [#list list as bean]
            <li class="text-truncate mt-2">[@A bean=bean class="cm-link"/]</li>
          [/#list]
        </ul>
      [/@EsArticleList]
    </div>
  </div>
</div>
[#include 'includes_footer.html'/]
</body>
</html>
